<template>
  <div class="profile-page">
    <div class="container">
      <div class="profile-header">
        <h1>个人中心</h1>
        <p>管理您的个人信息和展会相关数据</p>
      </div>
      
      <div class="profile-content">
        <el-row :gutter="30">
          <!-- 左侧导航 -->
          <el-col :span="6">
            <div class="profile-sidebar">
              <el-menu
                :default-active="activeTab"
                class="profile-menu"
                @select="handleTabSelect"
              >
                <el-menu-item index="info">
                  <el-icon><User /></el-icon>
                  <span>基本信息</span>
                </el-menu-item>
                <el-menu-item index="security">
                  <el-icon><Lock /></el-icon>
                  <span>安全设置</span>
                </el-menu-item>
                <el-menu-item index="exhibition">
                  <el-icon><Calendar /></el-icon>
                  <span>展会信息</span>
                </el-menu-item>
                <el-menu-item index="messages">
                  <el-icon><Message /></el-icon>
                  <span>消息通知</span>
                </el-menu-item>
              </el-menu>
            </div>
          </el-col>
          
          <!-- 右侧内容 -->
          <el-col :span="18">
            <div class="profile-main">
              <!-- 基本信息 -->
              <div v-if="activeTab === 'info'" class="tab-content">
                <h2>基本信息</h2>
                <el-form 
                  ref="infoForm" 
                  :model="userInfo" 
                  :rules="infoRules" 
                  label-width="100px"
                >
                  <el-form-item label="用户名" prop="username">
                    <el-input v-model="userInfo.username" disabled />
                  </el-form-item>
                  <el-form-item label="邮箱" prop="email">
                    <el-input v-model="userInfo.email" />
                  </el-form-item>
                  <el-form-item label="手机号码" prop="phone">
                    <el-input v-model="userInfo.phone" />
                  </el-form-item>
                  <el-form-item label="公司名称" prop="company">
                    <el-input v-model="userInfo.company" />
                  </el-form-item>
                  <el-form-item label="用户类型" prop="userType">
                    <el-select v-model="userInfo.userType" disabled>
                      <el-option label="参展商" value="exhibitor" />
                      <el-option label="专业观众" value="visitor" />
                      <el-option label="媒体" value="media" />
                    </el-select>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="saveUserInfo" :loading="saving">
                      保存修改
                    </el-button>
                  </el-form-item>
                </el-form>
              </div>
              
              <!-- 安全设置 -->
              <div v-if="activeTab === 'security'" class="tab-content">
                <h2>安全设置</h2>
                <el-form 
                  ref="passwordForm" 
                  :model="passwordForm" 
                  :rules="passwordRules" 
                  label-width="100px"
                >
                  <el-form-item label="当前密码" prop="oldPassword">
                    <el-input 
                      v-model="passwordForm.oldPassword" 
                      type="password" 
                      show-password 
                    />
                  </el-form-item>
                  <el-form-item label="新密码" prop="newPassword">
                    <el-input 
                      v-model="passwordForm.newPassword" 
                      type="password" 
                      show-password 
                    />
                  </el-form-item>
                  <el-form-item label="确认密码" prop="confirmPassword">
                    <el-input 
                      v-model="passwordForm.confirmPassword" 
                      type="password" 
                      show-password 
                    />
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="changePassword" :loading="changing">
                      修改密码
                    </el-button>
                  </el-form-item>
                </el-form>
              </div>
              
              <!-- 展会信息 -->
              <div v-if="activeTab === 'exhibition'" class="tab-content">
                <h2>展会信息</h2>
                <div class="exhibition-info">
                  <el-card v-for="exhibition in exhibitionData" :key="exhibition.id" class="exhibition-card">
                    <div class="exhibition-header">
                      <h3>{{ exhibition.title }}</h3>
                      <el-tag :type="exhibition.status === 'approved' ? 'success' : 'warning'">
                        {{ exhibition.statusText }}
                      </el-tag>
                    </div>
                    <div class="exhibition-details">
                      <p><strong>展会时间：</strong>{{ exhibition.date }}</p>
                      <p><strong>展位号：</strong>{{ exhibition.boothNumber }}</p>
                      <p><strong>展区：</strong>{{ exhibition.zone }}</p>
                      <p><strong>申请时间：</strong>{{ exhibition.applyDate }}</p>
                    </div>
                    <div class="exhibition-actions">
                      <el-button size="small" @click="viewExhibitionDetail(exhibition.id)">
                        查看详情
                      </el-button>
                      <el-button size="small" type="primary" @click="downloadMaterials(exhibition.id)">
                        下载资料
                      </el-button>
                    </div>
                  </el-card>
                </div>
              </div>
              
              <!-- 消息通知 -->
              <div v-if="activeTab === 'messages'" class="tab-content">
                <h2>消息通知</h2>
                <div class="messages-list">
                  <el-card v-for="message in messagesData" :key="message.id" class="message-card">
                    <div class="message-header">
                      <h4>{{ message.title }}</h4>
                      <span class="message-time">{{ message.time }}</span>
                    </div>
                    <p class="message-content">{{ message.content }}</p>
                    <div class="message-actions">
                      <el-button size="small" @click="markAsRead(message.id)">
                        标记已读
                      </el-button>
                      <el-button size="small" type="danger" @click="deleteMessage(message.id)">
                        删除
                      </el-button>
                    </div>
                  </el-card>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { getUserInfo, setUserInfo } from '../utils/auth'
import request from '../utils/request'

export default {
  name: 'Profile',
  setup() {
    const activeTab = ref('info')
    const saving = ref(false)
    const changing = ref(false)
    
    const userInfo = reactive({
      username: '',
      email: '',
      phone: '',
      company: '',
      userType: ''
    })
    
    const passwordForm = reactive({
      oldPassword: '',
      newPassword: '',
      confirmPassword: ''
    })
    
    const infoRules = {
      email: [
        { required: true, message: '请输入邮箱', trigger: 'blur' },
        { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
      ],
      phone: [
        { required: true, message: '请输入手机号码', trigger: 'blur' },
        { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
      ],
      company: [
        { required: true, message: '请输入公司名称', trigger: 'blur' }
      ]
    }
    
    const passwordRules = {
      oldPassword: [
        { required: true, message: '请输入当前密码', trigger: 'blur' }
      ],
      newPassword: [
        { required: true, message: '请输入新密码', trigger: 'blur' },
        { min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
      ],
      confirmPassword: [
        { required: true, message: '请确认密码', trigger: 'blur' },
        {
          validator: (rule, value, callback) => {
            if (value !== passwordForm.newPassword) {
              callback(new Error('两次输入的密码不一致'))
            } else {
              callback()
            }
          },
          trigger: 'blur'
        }
      ]
    }
    
    // 展会数据
    const exhibitionData = ref([
      {
        id: 1,
        title: '华南国际工业博览会 2025',
        status: 'approved',
        statusText: '已审核',
        date: '2025-03-15 至 2025-03-18',
        boothNumber: 'A-123',
        zone: '智能制造展区',
        applyDate: '2025-07-15'
      }
    ])
    
    // 消息数据
    const messagesData = ref([
      {
        id: 1,
        title: '展会审核通过通知',
        content: '恭喜！您的展会申请已通过审核，展位号：A-123',
        time: '2025-07-20 10:30'
      },
      {
        id: 2,
        title: '展会资料更新',
        content: '展会相关资料已更新，请及时查看最新信息',
        time: '2025-07-18 14:20'
      }
    ])
    
    const handleTabSelect = (key) => {
      activeTab.value = key
    }
    
    const saveUserInfo = async () => {
      try {
        saving.value = true
        const response = await request.put('/user/profile', userInfo)
        
        if (response.code === 200) {
          setUserInfo(response.data)
          ElMessage.success('信息保存成功')
        }
      } catch (error) {
        ElMessage.error('保存失败，请重试')
      } finally {
        saving.value = false
      }
    }
    
    const changePassword = async () => {
      try {
        changing.value = true
        const response = await request.put('/user/password', passwordForm)
        
        if (response.code === 200) {
          ElMessage.success('密码修改成功')
          passwordForm.oldPassword = ''
          passwordForm.newPassword = ''
          passwordForm.confirmPassword = ''
        }
      } catch (error) {
        ElMessage.error('密码修改失败，请重试')
      } finally {
        changing.value = false
      }
    }
    
    const viewExhibitionDetail = (id) => {
      console.log('查看展会详情:', id)
    }
    
    const downloadMaterials = (id) => {
      console.log('下载资料:', id)
    }
    
    const markAsRead = (id) => {
      console.log('标记已读:', id)
    }
    
    const deleteMessage = (id) => {
      console.log('删除消息:', id)
    }
    
    onMounted(() => {
      const currentUser = getUserInfo()
      if (currentUser) {
        Object.assign(userInfo, currentUser)
      }
    })
    
    return {
      activeTab,
      userInfo,
      passwordForm,
      infoRules,
      passwordRules,
      saving,
      changing,
      exhibitionData,
      messagesData,
      handleTabSelect,
      saveUserInfo,
      changePassword,
      viewExhibitionDetail,
      downloadMaterials,
      markAsRead,
      deleteMessage
    }
  }
}
</script>

<style scoped>
.profile-page {
  padding-top: 100px;
  min-height: 100vh;
  background: #f8f9fa;
}

.profile-header {
  text-align: center;
  margin-bottom: 40px;
}

.profile-header h1 {
  font-size: 32px;
  color: #2c3e50;
  margin-bottom: 10px;
}

.profile-header p {
  color: #666;
  font-size: 16px;
}

.profile-content {
  background: white;
  border-radius: 15px;
  padding: 30px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.profile-sidebar {
  background: #f8f9fa;
  border-radius: 10px;
  padding: 20px;
}

.profile-menu {
  border: none;
  background: transparent;
}

.profile-main {
  min-height: 500px;
}

.tab-content h2 {
  font-size: 24px;
  color: #2c3e50;
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 2px solid #f0f0f0;
}

.exhibition-info {
  display: grid;
  gap: 20px;
}

.exhibition-card {
  margin-bottom: 20px;
}

.exhibition-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.exhibition-header h3 {
  margin: 0;
  color: #2c3e50;
}

.exhibition-details p {
  margin: 8px 0;
  color: #666;
}

.exhibition-actions {
  margin-top: 15px;
  display: flex;
  gap: 10px;
}

.messages-list {
  display: grid;
  gap: 15px;
}

.message-card {
  margin-bottom: 15px;
}

.message-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.message-header h4 {
  margin: 0;
  color: #2c3e50;
}

.message-time {
  font-size: 12px;
  color: #999;
}

.message-content {
  color: #666;
  line-height: 1.6;
  margin-bottom: 15px;
}

.message-actions {
  display: flex;
  gap: 10px;
}

@media (max-width: 768px) {
  .profile-content {
    padding: 20px;
  }
  
  .el-col-6 {
    width: 100%;
    margin-bottom: 20px;
  }
  
  .el-col-18 {
    width: 100%;
  }
}
</style> 